﻿/// <reference path="../../../MyJS/MyString.js" />
/// <reference path="../DropDownBtn/DropDownBtn.js" />
/// <reference path="../JQMove/JQMove.js" />
/// <reference path="../ControlType.js" />

/*********************************下拉框控件***************************/

jQuery.fn.setComboBox = function (config) {
    /// <summary>设置input标签为combobox样式</summary>
    /// <param name="config" type="JSONObject">配置数据</param>
    //内部闭包的方法
    var initComboBox = function (config) {
        var el = this;
        if (el.tagName !== "INPUT") return; //必须是input标签，才可以设置

        //复制配置参数(并且新增ID号)
        $.extend(true, el, config, { id: 'comboBox_' + ComboBox.index++ });

        var dropdownStyle = typeof (el.dropdownStyle) === "undefined" ? (typeof (config.dropdownStyle) === "undefined" ? 'dropDown' : config.dropdownStyle) : el.dropdownStyle,
            defaultVal = typeof (el.defaultVal) === "undefined" ? (typeof (config.defaultVal) === "undefined" ? '' : config.defaultVal) : el.defaultVal,
            moveEnable = typeof (el.moveEnable) === "undefined" ? (typeof (config.moveEnable) === "undefined" ? false : config.moveEnable) : el.moveEnable;

        //设置默认值
        var aDefaultValues = defaultVal.split('|');
        el.value = aDefaultValues[0];
        el.comboBoxValue = typeof (aDefaultValues[1]) === 'undefined' ? '' : aDefaultValues[1];
        //判断下拉框的类型
        if (dropdownStyle === ComboBox.DropDownStyle.dropDownList) {
            el.onkeydown = $.disabledInputOp;
        }
        //设置下拉按钮
        $(el).setDropDownBtn();

        //改变选项的事件
        var changeEvent = function (e) {
            var func = new Function(el.fnSelectedIndexChange);
            func(el);
        };

        $(el).unbind("change", changeEvent);
        $(el).bind('change', changeEvent);
        //判断是否可移动（不适用恒等符号）
        if (moveEnable == "true") {
            JQMove.setMoveEl(el.parentNode);
        }
    };
    //判断传入的是否是一个数组
    jQuery.each(this, function () {
        initComboBox.call(this, config);
    });
};

jQuery.fn.getComboBoxValue = function () {
    /// <summary>获取combobox的值</summary>
    /// <returns type="Array" >返回值数组，[text,value]</returns>
    var val = this[0].comboBoxValue;
    return [this[0].value, typeof(val) === "undefined" ? '' : val];
};

var ComboBox = function (config) {
    /// <summary>控件的构造函数</summary>
    /// <param name="config" type="JSONObject">配置数据</param>
    this.config = {};
    //替换默认配置参数
    //jQuery.extend([deep], target, object1, [objectN])
    $.extend(true, this.config, ComboBox.defaultConfig);
    $.extend(true, this.config, config);
    this.meObj = null; //执行自己的jq对象
    this.init(); //执行初始化
};
//下拉框的类型
ComboBox.DropDownStyle = {
    dropDown: 'dropDown', //用户可以手动输入
    dropDownList: 'dropDownList' //用户不可以手动输入
};
ComboBox.htmlTemplate = "<input ctype='combobox' ctype='{ctype}' id='{id}' listItems='{listItems}' dropdownStyle='{dropdownStyle}' class='{cls}' type='text' noEmptyItem='{noEmptyItem}' defaultVal='{defaultVal}' fnBeforeDropDown='{fnBeforeDropDown}' fnAfterDropDown='{fnAfterDropDown}' fnDrop='{fnDrop}' moveEnable='{moveEnable}' disableAllEvent='{disableAllEvent}' bFocusFireDropFun='{bFocusFireDropFun}' fnSelectedIndexChange='{fnSelectedIndexChange}' />";
ComboBox.popupWin = window.createPopup();
ComboBox.popupWin.document.body.bgColor = "#FFFFFF";
ComboBox.index = 1; //控件序号，用于自动生成下拉控件的ID
ComboBox.curInputEl = null; //当前显示框绑定的输入框dom对象（input对象）
ComboBox.defaultConfig = {
    dropdownStyle: 'dropDown', //控件类型
    listItems: '', //下拉的选项，格式为：text1|id1;text2|id2
    noEmptyItem: false, //true：不允许有空的选择项，false，第一个选项就是空的
    defaultVal: '', //默认值
    moveEnable: false, //true：可移动；false：不可移动
    bFocusFireDropFun: true, //true，表示当获取焦点的时候，自动触发下拉事件，false的时候，不触发
    disableAllEvent: false, //禁止所有事件
    ctype: ControlType.combobox, //控件类型
    fnDrop: 'ComboBox.show(inputEl)', //打开下拉列表
    moveRangeParent: 'document',
    fnBeforeDropDown: $.noop, //下拉前触发的事件
    fnAfterDropDown: $.noop,  //下拉后触发的事件
    fnSelectedIndexChange: $.noop, //选项改变的时候触发的事件
    //下拉框的样式
    cls: 'ComboBoxInput',
    css: {
        'width': '120px'
    } //控制输入框的CSS样式（符合jq的CSS样式即可）
};     //默认参数

ComboBox.show = function (el) {
    if (typeof (el.listItems) === "undefined") return;
    var listItems = el.listItems,
        sHtml = "";
    if (!el.noEmptyItem) {
        listItems = ";" + el.listItems;
    }
    var aItems = el.listItems.split(';');
    ComboBox.curInputEl = el;
    //下拉按钮单击事件
    for (var i = 0; i < aItems.length; i++) {
        var aItem = aItems[i].split('|');
        if (aItem.length === 1) {
            aItem[1] = '';
        }
        sHtml += "<div style='cursor:default;padding:1 2 1 2;margin:0;height:14px;' align='left'" +
                 " text='" + aItem[0] + "' value='" + aItem[1] + "'" +
                 " onclick=\"parent.ComboBox.selectItem(this);\"" +
                 " onmouseout=\"parent.ComboBox.undoColor(this)\"" +
                 " onmouseover=\"parent.ComboBox.doColor(this,'#FFFFFF','#335EA8');\">" + aItem[0] + "</div>";
    }
    var bScroll = false,
        iItem = aItems.length;
    if (iItem > 10) {
        iItem = 10;
        bScroll = true;
    }
    var iHeight = iItem * 16 + 2;
    sHtml = "<div style='border:1px solid #000000;font-size:12px;height:" + iHeight + "px;overflow-y:auto;'>" + sHtml + "</div>";
    ComboBox.popupWin.document.body.innerHTML = sHtml;
    var offset = $(el).offset();
    var top = offset.top,
        width = el.offsetWidth;
    ComboBox.popupWin.show(0, el.offsetHeight, width, iHeight, el);
};

ComboBox.selectItem = function (item) {
    /// <summary>选中某项</summary>
    /// <param name="item" type="String">item项（div的dom对象）</param>
    var text = item.text,
        value = item.value;
    if (ComboBox.curInputEl) {
        ComboBox.curInputEl.value = text;
        ComboBox.curInputEl.comboBoxValue = value;
    }
    ComboBox.popupWin.hide();
    ComboBox.curInputEl = null;
};
//鼠标移动增加颜色
ComboBox.doColor = function (item, color, bg) {
    item.style.color = color; // changes text color
    item.style.backgroundColor = bg; // changes background
};
//恢复颜色
ComboBox.undoColor = function (item) {
    item.style.color = "#000000"; // sets color back to black
    item.style.backgroundColor = ""; // sets background to default
};

ComboBox.prototype.init = function () {
    /// <summary>控件初始化</summary>
    var html = ComboBox.htmlTemplate;
    //控制第一个输入框的样式即可
    for (var item in this.config) {
        //加上toString()是为了处理事件的情况
        html = MyString.replaceAll(html, '{' + item + '}', this.config[item].toString());
    }
    this.meObj = $(html);
    $(this.meObj).css(this.config.css);
};

ComboBox.prototype.appendTo = function (el, x, y) {
    /// <summary>把下拉框显示在哪个位置上</summary>
    /// <param name="el" type="DomElement/String[id]">父对象</param>
    /// <param name="x" type="int">x坐标</param>
    /// <param name="y" type="int">y坐标</param>
    el = $.getJQObj(el);
    if (el === null) return;
    //做一个父的DIV，方便控制移动(并且必须要设置这个div的宽度，否则后面移动计算位置的时候无法获取宽度）
    //因为移动对象，所以需要特殊增加一个属性
    var sHtml = MyString.format("<div moveRangeParent='{0}'></div>", this.config.moveRangeParent);
    var oParentDiv = $(sHtml).appendTo(el);
    //有指定x、y坐标的话，采用绝对定位
    if (typeof (x) !== "undefined" && typeof (y) !== "undefined") {
        oParentDiv.append(this.meObj).css({
            'left': x,
            'top': y,
            'position': 'absolute'
        });
    }
    else {
        $(this.meObj).appendTo(oParentDiv);
    }
    $(this.meObj).setComboBox();
    return this.meObj;
};
